import React, { useState } from "react";
import { Flex, Layout, Col, Row, Image, Modal,Divider } from "antd";
import { PhoneOutlined, RightOutlined } from "@ant-design/icons";

import "./index.less";

import logo from "../assets/logo.jpg";
import zhouqi from "../assets/zhouqi.jpg";
import jisu from "../assets/jisu.jpg";
import hegui from "../assets/hegui.jpg";
import right from "../assets/right.jpg";
import phone from "../assets/phone.jpg";
import download from '../assets/download.jpg';
import erweima from "../assets/erweima.png";

const { Header, Footer, Sider, Content } = Layout;

export default function HomePage() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleDownload = () => {
    setIsModalOpen(true);
  };
  return (
    <div className="home">
      <Layout>
        <Header className="header">
          <div className="headerTop">
            <Row gutter={{ xs: 8, sm: 16, md: 24 }} wrap={false}>
              <Col span={14}>
                <div className="logoBox">
                  <div>
                    <Image
                      className="logo"
                      src={logo}
                      preview={false}
                      alt="logo"
                    />
                  </div>
                  <div className="title">
                    <span className="logoTitle">云起分期</span>
                  </div>
                </div>
              </Col>
              <Col span={10}>
                <a href="#" className="menu">
                  首页
                </a>
                <a href="#" className="menu menuActive">
                  品牌故事
                </a>
                <a href="#" className="menu menuActive">
                  关于我们
                </a>
                <a href="#" className="menu menuActive">
                  资讯动态
                </a>
              </Col>
            </Row>
          </div>
          <div className="headerContent">
            <p className="contentTitle">云起分期APP</p>
            <p className="contentTitle">正规的融资资讯服务平台</p>
            <p>为您提供高效便捷的线上申请、金融资讯服务</p>
          </div>
          <Flex className="download" vertical onClick={handleDownload}>
            <Image preview={false} className="downloadImg" src={download} />
            <span className="downloadTitle">下载APP</span>
          </Flex>
        </Header>
        <Content className="content">
          <div className="contentBox">
            <h1 className="title">产品优势</h1>
            <div className="itemBox">
              <Flex vertical={true} justify="center" align="center">
                <Image className="conImg" preview={false} src={zhouqi} />
                <span className="itemTitle">周期灵活</span>
                <span className="itemTips">最长可借3年</span>
              </Flex>
              <Flex>
                <Image className="right" preview={false} src={right} />
              </Flex>
              <Flex vertical={true} justify="center" align="center">
                <Image className="conImg" preview={false} src={jisu} />
                <span className="itemTitle">极速审批</span>
                <span className="itemTips">最快当天放款</span>
              </Flex>
              <Flex>
                <Image className="right" preview={false} src={right} />
              </Flex>
              <Flex vertical={true} justify="center" align="center">
                <Image className="conImg" preview={false} src={hegui} />
                <span className="itemTitle">合规机构</span>
                <span className="itemTips">服务由可靠合规提供</span>
              </Flex>
            </div>
          </div>
          <div className="contentBottom">
            <div className="contentBottomBox">
              <Image className="phoneImg" preview={false} src={phone} />
              <Flex vertical={true} justify="center" align="flex-start">
                <Flex justify="center" align="center">
                  <Image
                    className="bottomLogo"
                    src={logo}
                    preview={false}
                    alt="logo"
                  />
                  <span className="bottomTitle">云起分期</span>
                </Flex>
                <span className="bottomTips">正规的融资咨询服务平台</span>
              </Flex>
            </div>
          </div>
        </Content>
        <Footer className="footer">
          <div style={{display:'flex',justifyContent:"center",alignItems:"center",flexDirection:'column'}}>
          <div className="footerTop">
            <Flex vertical={false} justify="space-between"align="flex-start">
              <div >
                <Flex>
                  <PhoneOutlined className="footerIcon" />
                  <div className="footerTitle">联系我们</div>
                </Flex>
                <div className="footerPhone">
                  <p className="footerAddress">客服电话：400-036-7888</p>
                  <p className="footerAddress">客服邮箱：customerservice@YUNQI.cn</p>
                  <p className="footerAddress">工作时间：周一到周五9:00-18:00</p>
                  <p className="footerAddress">监督电话：020-12345</p>
                </div>
              </div>
              <div style={{marginLeft:"100px"}}>
                <div className="footerTitle ">公司地址</div>
                <p className="footerAddress footerPhone">浙江省杭州市西湖区双龙街199西溪银泰城2号写字楼-南楼802室</p>
              </div>
            </Flex>
            <div className="footerErweima">
              <Image className="footerImg" preview={false} src='https://www.yunqitop.com/public/qrcode/amortise.png'/>
              <span className="erText">扫一扫下载云起分期APP</span>
            </div>
          </div>
          <div style={{width:"100%"}}>
            <Divider className="divider"/>
          </div>
          <div className='footerBottom'>
          <p className="footerTips">
          风险提示：贷款有风险，借款需谨慎。请根据个人能力合理贷款，理性消费，避免逾期。贷款额度、放款时间和费率标准等以实际审批结果为准。
          </p>
          <p>杜绝借款犯罪，倡导合法借贷，信守借款合约。</p>
          <p style={{marginTop:10}}>杭州森谷鸣龙科技有限公司 黑ICP备2024016579号-2 © Hangzhou Senguminglong Pawn Co., Ltd　</p>
          </div>
          </div>
        </Footer>
      </Layout>
      <Modal
        open={isModalOpen}
        maskClosable={false}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <div className="modalBox">
          <Flex vertical={true} justify="center" align="center">
            <Image className="modalLogo" preview={false} src={logo} />
            <p className="logoTitle">云起分期</p>
            <p className="logoTip">正规的融资资讯服务平台</p>
            <div className="erweimaBox">
              <Image className="erImg" preview={false} src='https://www.yunqitop.com/public/qrcode/amortise.png' />
              <span className="download">扫码下载</span>
              <span className="title">云起分期APP</span>
            </div>
          </Flex>
        </div>
      </Modal>
    </div>
  );
}
